<template>
  <top></top>
  <div></div>
  <div id = "Content">
    <div id = "Catalog" v-for="order in getOrdersByUserId" :key="order.orderId">
      <h3>--------------------order--------------------</h3>
      <table>
        <tr>
          <th><b>OrderId</b></th>
          <th><b>OrderDate</b></th>
          <th><b>ShipToAddress</b></th>
          <th><b>ShipToFirstName</b></th>
          <th><b>ShipToLastName</b></th>
          <th><b>TotalPrice</b></th>
        </tr>
        <tr>
          <td>{{order.orderId}}</td>
          <td>{{order.orderTime}}</td>
          <td>{{order.receiverAddress}}</td>
          <td>{{order.receiverPhone}}</td>
          <td>{{order.receiverName}}</td>
          <td>{{order.orderCost}}</td>
        </tr>

        <tr>
          <th><b>Num</b></th>
          <th><b>Item ID</b></th>
          <th><b>Description</b></th>
          <th><b>Quantity</b></th>
          <th><b>List Price</b></th>
          <th><b>Total Cost</b></th>
        </tr>
        <tr v-for="item in order.orderItemDOList" :key="item.orderItemId">
          <td>{{item.orderItemId}}</td>
          <td>{{item.itemId}}</td>
          <td>{{item.itemSpecification}}</td>
          <td>{{item.itemQuantity}}</td>
          <td>{{item.Price}}</td>
          <td>{{item.itemQuantity * item.Price}}</td>
        </tr>
      </table>

    </div>
  </div>
  <bottom></bottom>
</template>

<script>
import Bottom from "@/App.vue";
import Top from "@/App.vue";
import axios from "axios";

export default {
  name: "myOrder",
  components: {Top, Bottom},
  data(){
    return{
      orders: [],
      username:''
    }
  },
  mounted(){
    this.username = this.$route.query.username;
    this.init();//初始化页面获取订单列表
    this.getOrderItemList();//获取订单的详细商品信息
  },
  methods:{
    init(){
      //获取订单列表
      axios.get('http://localhost:8080/jpetstore/orders')
          .then(response =>{
            this.orders = response.data.data;
          })
          .catch(error =>{
            console.error('get order list error',error);
          })
    },
    getOrderItemList(){
      //获取订单内商品信息
      for(let order of this.orders){
        axios.get('http://localhost:8080/jpetstore/orders/'+order.orderId)
            .then(response =>{
              order.orderItemDOList = response.data.data.orderItemDOList;
            })
            .catch(error =>{
              console.error('get item list in order error',error);
            });
      }
    }
  },
  computed:{
    getOrdersByUserId(){
      //筛选该用户自己的订单
      return this.orders.filter(item =>{
        return item.userId.toLowerCase().includes(this.username.toLowerCase());
      })
    }
  }
}
</script>

<style scoped>

</style>